{extend name="index/public" /}

{block name="content"}
<form class="layui-form" action="" id="searchBox">
    <div class="layui-inline">
        <select name="plat" id="plat" lay-filter="plat">
            <option value="">全部（渠道类型）</option>
            <option value="cps">CPS</option>
            <option value="sdk">联运</option>
        </select>
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date" value="{$date}" placeholder="yyyy-MM-dd">
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            {MyTag:game type='manage' /}
        </div>
    </div>
    <div class="layui-inline">
        <select name="range" id="range" lay-filter="range">
            <option value="3">后续3天</option>
            <option value="7">后续7天</option>
            <option value="14">后续14天</option>
            <option value="30">后续30天</option>
            <option value="45">后续45天</option>
            <option value="60">后续60天</option>
            <option value="90">后续90天</option>
        </select>
    </div>
    <div class="layui-inline">
        <button class="layui-btn searchBtn my-btn my-btn-sm" lay-filter="demo1" lay-submit="">搜索</button>
        <a href="javascript:;" class="layui-btn my-btn my-btn-sm toolBtn" id="export">导出</a>
        <span class="layui-badge-rim" id="help" style="cursor: pointer; font-weight: bold;">?</span>
    </div>
</form>

<table id="tableBox" lay-filter="tableBox"></table>

<script type="text/html" id="tableBar">
    <a class="layui-btn my-btn layui-btn-sm" lay-event="chart"><i class="layui-icon">&#xe62c;</i>漏斗图</a>
</script>
{/block}

{block name="css"}
{/block}

{block name="js"}
<script>
    layui.use(['form', 'laydate', 'table'], function(){
        var table = layui.table
            ,$ = layui.$
            ,form = layui.form
            ,laydate = layui.laydate
            ,load = null
            ,active = {
                reload: function () {
                    var jsonObj = {
                        "plat": $('#plat').val()
                        ,"date": $('#date').val()
                        ,"game_id": $('#game_id').val()
                        ,"range": $('#range').val()
                        ,"game_server": $('#game_server').find('.my-btn').attr('val')
                        ,"game_publish": $('#game_publish').find('.my-btn').attr('val')
                        ,"game_platform": $('#game_platform').find('.my-btn').attr('val')
                        ,"game_client": $('#game_client').find('.my-btn').attr('val')
                    };

                    table.reload('tableId', {
                        page: {curr: 1}
                        ,where: jsonObj
                        ,height: 'full-100'
                    })
                },
            };

        table.render({
            elem: '#tableBox'
            ,height: 'full-100'
            ,url: '{:url("AnalysisGameChange/index")}'
            ,where: {date:$('#date').val(), range: $('#range').val()}
            ,page: true
            ,limit:400
            ,limits:[400,800,1000]
            ,loading:true
            ,id:'tableId'
            ,done: function (res, curr, count) {
                layer.close(load);
                $('#layui-loading').hide();
            }
            ,cols: [[
                {field:'date', title: '日期', width: 100}
                ,{field:'game_id', title: '游戏ID', width: 100, sort:true}
                ,{field:'game_name', title: '游戏名称', width: 160, sort:true}
                ,{field:'game_add', title: '游戏新增', width: 130, sort:true}
                ,{field:'game_active', title: '游戏活跃', width: 130, sort:true}
                ,{field:'order_number', title: '下单人数', width: 130, sort:true}
                ,{field:'pay_number', title: '付费人数', width: 130, sort:true}
                ,{field:'pay_money', title: '付费金额', width: 130, sort:true}
                ,{title: '操作', align:'center', width:300, toolbar:'#tableBar'}
            ]]
        });

        form.on('select(game_id)', function(data){
            $.post('{:url("AnalysisGameKeep/time")}',{game_id: data.value}, function(json){
                layer.close(load);
                if(json.code==0){
                    $('#date').val(json.data);
                }else{
                    layer.msg(json.msg, {icon: 0, time: 1000});
                }
            }, 'JSON').error(function(){
                layer.close(load);
                layer.msg('连接超时，请联系后台管理员', {icon: 2, time:3000});
            });
        });


        //日期
        laydate.render({
            elem: '#date'
            ,type: 'date'
            ,calendar: true
            ,min: '2016-01-01'
            ,max: 0
        });

        $('#searchBox .searchBtn').on('click', function(){
            load = layer.load();
            active['reload'].call(this);
            return false;
        });

        $('#searchBox .toolBtn').on('click', function(){
            if($(this).attr('id') == 'export'){
                var jsonStr = ''
                    ,jsonObj = {
                        "plat": $('#plat').val()
                        ,"date": $('#date').val()
                        ,"game_id": $('#game_id').val()
                        ,"game_server": $('#game_server').find('.my-btn').attr('val')
                        ,"game_publish": $('#game_publish').find('.my-btn').attr('val')
                        ,"game_platform": $('#game_platform').find('.my-btn').attr('val')
                        ,"game_client": $('#game_client').find('.my-btn').attr('val')
                        ,"export": true
                    };
                layer.msg('导出中....', {icon: 1, time: 2000});
                for(k in jsonObj){
                    jsonStr += k + '=' + jsonObj[k] + '&';
                }
                window.location.href = '{:url("AnalysisGameChange/index")}?'+jsonStr.substring(0, jsonStr.length-1);
            }
        });

        table.on('tool(tableBox)', function(obj){
            var data = obj.data
            if(obj.event === 'chart'){
                var jsonStr = ''
                    ,jsonObj = {
                        "plat": $('#plat').val()
                        ,"date": data.date
                        ,"game_id": data.game_id
                        ,"game_name": data.game_name
                        ,"game_add": data.game_add
                        ,"game_active": data.game_active
                        ,"order_number": data.order_number
                        ,"pay_number": data.pay_number
                    };
                for(k in jsonObj){
                    jsonStr += k + '=' + jsonObj[k] + '&';
                }
                layer.open({
                    type: 2
                    ,title: '漏斗图'
                    ,resize: true
                    ,offset: '80px'
                    ,area: ['85%', '75%']
                    ,content: '{:url("AnalysisGameChange/chart")}?'+jsonStr.substring(0, jsonStr.length-1)
                });
            }
        });

        $('#help').click(function(){
            layer.open({
                type: 1
                ,title: false
                ,area: '1000px;'
                ,shadeClose: true
                ,offset: '200px'
                ,shade: 0
                ,content: '<div style="padding: 20px;"><table class="layui-table">' +
                '<thead><th>关键词</th><th>解释</th></thead><tbody>' +
                '<tr>'
                    +'<td>转化率</td>'
                    +'<td>分析某一批用户从进入游戏到成功付费的过程</td>'
                +'</tr>'+
                '<tr>'
                +'<td>日期</td>'
                +'<td>选择日期是进入游戏的日期，在后续N天内的一个数据转化</td>'
                +'</tr>'
                +'</tbody></table></div>'
            });
        })
    });
</script>
{/block}